﻿/// <reference path="../ext.js" />
//定义类
//继承自Ext.window.Window
Ext.define('Ext.ux.Logon', {
    extend: 'Ext.window.Window',
    singleton: true,                //单例模式的好处是在页面中直接用show方法显示就行了
    title: '洋芋CMS系统登录',
    width: 300,
    height: 210,
    modal: true,                    //模态:可以在整个页面中动态显示的.
    closable: false,                //禁止关闭
    closeAction: 'hide',            //关闭模式:隐藏
    hideMode:'offsets',             //隐藏模式:偏移
    resizable: false,               //禁止调整大小
    
	//先定义好表单
    initComponent: function () {
        var me = this;
        //套一个容器用一个属性来指向对象实例，这样就可以通过该属性在类的内部访问到实例了
        me.image = Ext.create(Ext.Img, {
            style:'cursor:pointer',
            src: 'Home/VerifyCode',
            listeners: {
                click: me.onRefreshImage,
                element: 'el',
                scope: me
            }
        });
        me.form = Ext.create(Ext.form.Panel, {
            border: false,
            bodyPadding: 5,
            bodyStyle: 'background:#DFE9F6',
            url: 'Account/DoLogOn',
            defaultType: 'textfield',  //表单内定义的文本字段
            fieldDefaults: {
                labelWidth: 60,
                anchor: '-6',
                allowBlank:false
            },
            items: [{
                fieldLabel: '用户名',
                name: 'username',
                value:'admin'
            }, {
                fieldLabel: '密码',
                name: 'password',
                inputType: 'password',
                value:'123123'
            }, {
                fieldLabel: '验证码',
                name: 'vcode',
                minLength: 4,
                maxLength:4
            }, {
                xtype: 'container',
                height: 40,
                anchor: '-5',
                layout: 'fit',
                items: [me.image]
            }, {
                xtype: 'container',
                anchor: '-5',
                html:'不分大小写,点击图片刷新!'
            }],
            //dockedItems是extjs的新功能.
            dockedItems: [{
                xtype: 'toolbar',   //工具条
                dock: 'bottom',     //底部停靠
                ui: 'footer',       //底部页脚工具栏
                layout: { pack: 'end' },     //居中布局
                items: [{
                    text: '登录',
                    width: 50,
                    disabled: true,              //禁止显示
                    formBind: true,             //只有form中满足条件了才能显示
                    handler: me.onLogin,
                    scope:me
                }, {
                    text: '重置',
                    width: 50,
                    disable: true,
                    handler: me.onReset,
                    scope:me
                }]
            }]
        });
        me.items = [me.form]
        me.callParent(arguments);
    },

    onRefreshImage: function () {
        this.image.setSrc('Home/VerifyCode?_dc='+(new Date()).getTime());
    },

    onLogin: function () {
        var me = this,
            f = me.form.getForm();
        if (f.isValid()) {
            f.submit({
                waitMsg: '正在登录,请稍候..',
                waitTitle: '正在登录',
                success: function (form, action) {
                    window.location.reload();
                },
                failure: function (form,action) {
                    //var err=Ext.decode(action.result);
                    Ext.Msg.alert('错误提示',action.result.error);
                },
                scope:me
            })
        }
    },
    
    onReset: function () {
        var me = this;
        me.form.getForm().reset();
        if (me.form.itmes.items[0]) {
            me.form.items.items[0].focus(true, 10);
        }
        me.onRefreshImage();
    }
});